<template>
    <div class="container table-responsive">

        <div class="table-responsive">
            <table class="table table-striped table-sm table-responsive">
                <thead>
                    <tr>
                        <th scope="col">名称和大小</th>
                        <th scope="col">设置</th>
                        <th scope="col">原始音频</th>
                        <th scope="col">结果页</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span><b></b><br></span>
                            <span style='font-size: 0.8rem'><b>添加日期： 2023-12-11 11:24 文件大小： 10.12 MB</b></span>

                        </td>
                        <td><a href="">Demucs4 HT (vocals, drums, bass, other)</a>
                        </td>
                        <td><audio src="" controls></audio>
                        </td>
                        <td><a href=""><u>结果</u></a></td>
                    </tr>
                    <tr>
                        <td>
                            <span><b></b><br></span>
                            <span style='font-size: 0.8rem'><b>添加日期： 2023-12-11 11:21 文件大小： 2.35 MB</b></span>

                        </td>
                        <td><a href="">MDX23C (vocals, instrumental)</a></td>
                        <td><audio src="" controls></audio></td>
                        <td><a href=""><u>结果</u></a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span><b>sLsR instruments.wav</b><br></span>
                            <span style='font-size: 0.8rem'><b>添加日期： 2023-12-11 11:21 文件大小： 85.01 MB</b></span>

                        </td>
                        <td><a href="">MVSep Guitar (guitar, other)</a></td>
                        <td><audio src="" controls></audio></td>
                        <td><a href=""><u>结果</u></a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nav class="row h-100 justify-content-center align-items-center" aria-label="Pagination">
                <ul class="pagination" role="navigation">

                    <li class="page-item">
                        <a class="page-link" href="" rel="prev" aria-label="&laquo; 上一页">&lsaquo;</a>
                    </li>





                    <li class="page-item active"><a class="page-link" href="">1</a></li>
                    <li class="page-item" aria-current="page"><span class="page-link">2</span></li>
                    <li class="page-item"><a class="page-link" href="">3</a></li>
                    <li class="page-item"><a class="page-link" href="">4</a></li>
                    <li class="page-item"><a class="page-link" href="">5</a></li>
                    <li class="page-item"><a class="page-link" href="">6</a></li>
                    <li class="page-item"><a class="page-link" href="">7</a></li>
                    <li class="page-item"><a class="page-link" href="">8</a></li>

                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li>





                    <li class="page-item"><a class="page-link" href="">54</a></li>
                    <li class="page-item"><a class="page-link" href="https://mvsep.com/zh/demo?page=55">55</a></li>


                    <li class="page-item">
                        <a class="page-link" href="" rel="next" aria-label="下一页 &raquo;">&rsaquo;</a>
                    </li>
                </ul>

            </nav>
        </div>
    </div>
</template>

<script>
export default {
    name: "SampleComponent"
}
</script>


<style scoped>
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.container {
    max-width: 960px;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
    padding: 0.3rem;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

table th,
table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

th {
    text-align: inherit;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

table {
    border-collapse: collapse;
}
</style>